import { Table } from 'antd';

//数据
const data = [
  {
    key: '1',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2711',
    标题4: 'TS2711-X1',
    标题5: 'TS2711-X1',
    标题6: 'TSB2',
    标题7: 'TSB2-A',
    数量1: '9000',
    数量6: '123659',
    数量10: '0',
    数量11: '1275',
  },
  {
    key: '2',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2711',
    标题4: 'TS2711-X1',
    标题5: 'TS2711-X1',
    标题6: 'TSB1',
    标题7: 'TSB2-B',
    数量1: '0',
    数量6: '6494385',
    数量10: '0',
    数量11: '1275',
  },
  {
    key: '3',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2711',
    标题4: 'TS2711-X1',
    标题5: 'TS2711-X1',
    标题6: 'TSB2',
    标题7: 'TSB2-C',
    数量1: '3000',
    数量6: '1285444640',
    数量10: '0',
    数量11: '1275',
  },
  {
    key: '4',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2711',
    标题4: 'TS2711-X1',
    标题5: 'TS2711-X1',
    标题6: 'TSB1',
    标题7: 'TSB2-D',
    数量1: '70',
    数量6: '33447170',
    数量10: '0',
    数量11: '1275',
  },
  {
    key: '5',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2711',
    标题4: 'TS2711-X1',
    标题5: 'TS2711-X1',
    标题6: 'TSB2',
    标题7: 'TSB2-E',
    数量1: '120000',
    数量6: '0',
    数量10: '0',
    数量11: '1275',
  },
  {
    key: '6',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2815',
    标题4: 'TS2815-X1',
    标题5: 'TS2815-X1',
    标题6: 'TS08A7',
    标题7: 'TS08A7-A',
    数量1: '4000',
    数量6: '19612295',
    数量10: '0',
    数量11: '298',
  },
  {
    key: '7',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2815',
    标题4: 'TS2815-X1',
    标题5: 'TS2815-X1',
    标题6: 'TS08A7',
    标题7: 'TS08A7-B',
    数量1: '0',
    数量6: '342157090',
    数量10: '0',
    数量11: '298',
  },
  {
    key: '77',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2815',
    标题4: 'TS2815-X0',
    标题5: 'TS2815-X0',
    标题6: 'TS08A7',
    标题7: 'TS08A7-B',
    数量1: '0',
    数量6: '342157090',
    数量10: '0',
    数量11: '298',
  },
  {
    key: '8',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2815',
    标题4: 'TS2815-X1',
    标题5: 'TS2815-X1',
    标题6: 'TS08A7',
    标题7: 'TS08A7-C',
    数量1: 'TS08A7-C',
    数量6: '35525230',
    数量10: '0',
    数量11: '298',
  },
  {
    key: '9',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2815',
    标题4: 'TS2815-X2',
    标题5: 'TS2815-X2',
    标题6: 'TS04A8',
    标题7: 'TS04A8-A',
    数量1: '2500',
    数量6: '87122018',
    数量10: '0',
    数量11: '0',
  },
  {
    key: '10',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2815',
    标题4: 'TS2815-X2',
    标题5: 'TS2815-X2',
    标题6: 'TS04ZA9',
    标题7: 'TS04ZA9-A',
    数量1: '1600',
    数量6: '4342231',
    数量10: '0',
    数量11: '0',
  },
  {
    key: '11',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2818',
    标题4: 'TS2818-X3',
    标题5: 'TS2818-X3',
    标题6: 'TSA41',
    标题7: 'TSA41-A',
    数量1: '0',
    数量6: '936522320',
    数量10: '1111',
    数量11: '321',
  },
  {
    key: '12',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2818',
    标题4: 'TS2818-X3',
    标题5: 'TS2818-X3',
    标题6: 'TSA41',
    标题7: 'TSA41-B',
    数量1: '164',
    数量6: '164',
    数量10: '1111',
    数量11: '321',
  },
  {
    key: '13',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2818',
    标题4: 'TS2818-X6',
    标题5: 'TS2818-X6',
    标题6: 'TSA42',
    标题7: 'TSA42-A',
    数量1: '0',
    数量6: '13945926',
    数量10: '0',
    数量11: '11027',
  },
  {
    key: '14',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2818',
    标题4: 'TS2818-X6',
    标题5: 'TS2818-X6',
    标题6: 'TSA42',
    标题7: 'TSA42-B',
    数量1: '17000',
    数量6: '1785358842',
    数量10: '0',
    数量11: '11027',
  },
  {
    key: '15',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2818',
    标题4: 'TS2818-X6',
    标题5: 'TS2818-X6',
    标题6: 'TSA42',
    标题7: 'TSA42-C',
    数量1: '5500',
    数量6: '0',
    数量10: '0',
    数量11: '11027',
  },
  {
    key: '16',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2818',
    标题4: 'TS2818-X6',
    标题5: 'TS2818-X6',
    标题6: 'TSA42',
    标题7: 'TSA42-D',
    数量1: '0',
    数量6: '0',
    数量10: '0',
    数量11: '11027',
  },
  {
    key: '17',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-A',
    数量1: '1550',
    数量6: '26653900',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '18',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X0',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-B',
    数量1: '0',
    数量6: '9153519',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '19',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-C',
    数量1: '6300',
    数量6: '52922134',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '20',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-D',
    数量1: '0',
    数量6: '2040200',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '21',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-E',
    数量1: '0',
    数量6: '2311880',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '22',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-F',
    数量1: '7700',
    数量6: '41230370',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '23',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-G',
    数量1: '3300',
    数量6: '531589950',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '24',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X0',
    标题6: 'TS1D',
    标题7: 'TS1D-S',
    数量1: '1650',
    数量6: '86236880',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '25',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-I',
    数量1: '50',
    数量6: '6625151',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '26',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-J',
    数量1: '53500',
    数量6: '4154120242',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '27',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X0',
    标题6: 'TS1D',
    标题7: 'TS1D-K',
    数量1: '200',
    数量6: '23128460',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '28',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS3315',
    标题4: 'TS3315-X1',
    标题5: 'TS3315-X1',
    标题6: 'TS1D',
    标题7: 'TS1D-L',
    数量1: '11000',
    数量6: '0',
    数量10: '0',
    数量11: '1251',
  },
  {
    key: '29',
    标题1: '2022/4/1',
    标题2: '2022/6/1',
    标题3: 'TS2711',
    标题4: 'TS2711-X1',
    标题5: 'TS2711-X0',
    标题6: 'TSB2',
    标题7: 'TSB2-X',
    数量1: '9000',
    数量6: '123659',
    数量10: '0',
    数量11: '1275',
  },
];

//columns栏的每个对象title(数据data中每个对象的key值集合，从第四个开始，前三个删除掉)
const titleArr = Object.keys(data[0]).splice(3);

//数组排序
const sortArr = (data, number: number) => {
  data.sort((a: [], b: []) => {
    if(a[titleArr[number]] < b[titleArr[number]]){
      return -1;
    }else if(a[titleArr[number]] > b[titleArr[number]]){
      return 1;
    }else{
      return 0;
    }
  })
}

//第一列相同的排序在一起
sortArr(data, 0)

//二重数组，相同的放在同一内部数组中并排序。numTemp为判断的title
const dataTransTitle = (data, numTemp: number) => {
  const arrTemp = [[data[0]]];
  for(let i = 1; i < data.length; i++) {
    if(data[i][titleArr[numTemp - 1]] == data[i - 1][titleArr[numTemp - 1]]) {
      arrTemp[arrTemp.length - 1].push(data[i]);
    } else {
      const arrNew = [data[i]];
      arrTemp.push(arrNew);
    }
  }
  for(let j = 0; j < arrTemp.length; j++) {//重组数组进行排序，第二列的每组进行了排序
    sortArr(arrTemp[j], numTemp);
  }
  return arrTemp.flat(2); //二重数组扁平化
}

//三次重排序（每次依据前一列构成的一重数组进行排序）
const dataSort = (data) => {
  let _data = data;
  let num = 1;
  for(let i = 0; i < 3; i++) { //i=0时以第一列作为一重数组，排序第二列
    _data = dataTransTitle(_data, num);
    num++;
  }
  return _data;
}
const finalData = dataSort(data);


//二维数组9*28，每个元素为对应的Table的rowSpan取值，
//indexList函数处理后的效果为：第一行[5, 0, 0, 0, 0, 5, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
const indexData: any[] = [];


//处理indexData数组的函数（内部是根据数据中对象的键进行比较判断的）
const indexList = (data) => {
  for (let i = 0; i < titleArr.length; i++) { //取定对象中的索引，for内的for依次遍历每个对象
    const innerIndex = new Array(data.length).fill(0); //全为0的数组
    innerIndex[0] = 1;
    let temp = data[0][titleArr[i]]; //需要判断的值
    let indexTemp = 0; //临时索引
    for (let j = 1; j < data.length; j++) {
      if (data[j][titleArr[i]] == temp) { //下一个值与temp相同时，数组的temp位置对应的值加一
        innerIndex[indexTemp]++;
      } else { //下一个值与temp不相同时，temp值重新赋值，此位置的数组索引值设为1，临时索引值改变
        temp = data[j][titleArr[i]];
        innerIndex[j] = 1;
        indexTemp = j;
      }
    }
    indexData.push(innerIndex); //最终得到的二维数组
  }
}
indexList(finalData);

//Table的onCell的改装函数
const shareOnCell = (indexData, _index: number) => { ////_index是二维数组的索引
  const tempList = indexData[_index];
  return (_: any, index: number) => { //原onCell中只需要这个返回函数
    return { rowSpan: tempList[index]}
  }
}


// const columns = [
//   {
//     title: '标题3',
//     dataIndex: '标题3',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 0),
//   },
//   {
//     title: '标题4',
//     dataIndex: '标题4',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 1),
//   },
//   {
//     title: '标题5',
//     dataIndex: '标题5',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 2),
//   },
//   {
//     title: '标题6',
//     dataIndex: '标题6',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 3),
//   },
//   {
//     title: '标题7',
//     dataIndex: '标题7',
//     render: (text: any) => <a>{text}</a>,
//   },
//   {
//     title: '数量1',
//     dataIndex: '数量1',
//     render: (text: any) => <a>{text}</a>,
//   },
//   {
//     title: '数量1合计',
//     dataIndex: '数量1',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 1),
//   },
//   {
//     title: '数量6',
//     dataIndex: '数量6',
//     render: (text: any) => <a>{text}</a>,
//   },
//   {
//     title: '数量6合计',
//     dataIndex: '数量6',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 1),
//   },
//   {
//     title: '数量10',
//     dataIndex: '数量10',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 1),
//   },
//   {
//     title: '数量11',
//     dataIndex: '数量11',
//     render: (text: any) => <a>{text}</a>,
//     onCell: shareOnCell(indexData, 1),
//   },
// ];



//根据转化后的数据，配置官网类型的columns形式
const columnsAdaptor = (titles: string | any[]) => {
  const columnsArr = [];
  const objTemp1 = {title: '', dataIndex: '', render: (text: any) => <a>{text}</a>, onCell: (_: any, index: number) => { return { rowSpan: 1}}};
  const objTemp2 = {title: '', dataIndex: '', render: (text: any) => <a>{text}</a>, onCell: (_: any, index: number) => { return { rowSpan: 1}}};
  for(let i = 0; i < titles.length; i++) { //依次补充columns数组
    const columnsObj = {title: '', dataIndex: '', render: (text: any) => <a>{text}</a>, onCell: (_: any, index: number) => { return { rowSpan: 1}}};
    columnsObj.title = titles[i];
    columnsObj.dataIndex = titles[i];
    if(i < 5) {
      columnsObj.onCell = shareOnCell(indexData, i);
    }
    if(i == 7 || i == 8) {
      columnsObj.onCell = shareOnCell(indexData, 1);
    }
    columnsArr.push(columnsObj);
  }
  //补充两个合计的内容
  objTemp1.title = titleArr[5] + '合计';
  objTemp1.dataIndex = titleArr[5];
  objTemp1.onCell = columnsArr[1].onCell;
  columnsArr.splice(6, 0, objTemp1);

  objTemp2.title = titleArr[6] + '合计';
  objTemp2.dataIndex = titleArr[6];
  objTemp2.onCell = columnsArr[1].onCell;
  columnsArr.splice(8, 0, objTemp2);
  
  return columnsArr;
}

const tableColumns = columnsAdaptor(titleArr);

export default () => <Table columns={tableColumns} dataSource={finalData} bordered pagination={false} />;